<template>
  <div class="confdssdf">
    <headNav :title="QRcodeNum == 2 ? '邀请家长' : '邀请教师'" ></headNav>
    <div v-show="!imgUrl" ref="imageWrapper" class="bigDivCss" id="imageWrapper">
      <img src="@/assets/img/my/invitationImg.png" mode="" v-if="QRcodeNum == 2"  >
      <img src="@/assets/img/my/invitationImg1.png" mode="" v-else >
      <div class="textCss" >
        <div class="textDivCss" v-for="(val, index) in List" :key="index" >
          <div class="flexCenter" >{{val.id}}</div>
          <span>{{val.name}}</span>
        </div>
      </div>
      <div class="imgCss" >
        <div ref="qrCodeUrl" class="pic-img" mode="" ></div>
        <div class="flexHeight" >
          <div>班级码</div>
          <div class="textClass" >{{numQRcode}}</div>
        </div>
        <!-- <div class="chang-an">长按识别二维码</div> -->
      </div>
       
      <div class="buttonCss" >
        <button type="default">长按发给朋友</button>
        
      </div>
    </div>
    <!-- <button @click="openGuide" type="default">分享</button> -->
    <img  v-show="imgUrl" :src="imgUrl" class="canvas-img" alt="">

    <guide ref="guide"></guide>
  </div>
</template>

<script>
import headNav from '@/components/headNav/headNav.vue'
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
import { getTrialClassApi } from '@/api/myNewApi'
import {  } from 'vux'
import html2canvas from "@/util/html2canvas"
import QRCode from 'qrcodejs2'
import guide from '../components/guide'
import wechat from "@/util/wechat"
export default {
  components: {
    headNav, guide
  },
  computed: {
    ...mapState({
      studentId: state => state.user.studentId,
      roleCode: state => state.user.roleCode,
      teacherId: state => state.user.teacherId,
      realName: state => state.user.realName
    })
  },
  data () {
    return {
      picture: '',
      numQRcode: '',
      QRcodeNum: '',  // 识别是家长过来还是教师过来的 1是教师  2是家长
      List: '',
      textList2: [
        {id: 1, name: '关注“骆米智慧校园”公众号' },
        {id: 2, name: '点击菜单注册或扫码注册' },
        {id: 3, name: '根据班级码添加孩子' },
        {id: 4, name: '班主任审核通过后使用系统' },
      ],
      textList1: [
        {id: 1, name: '微信扫码注册' },
        {id: 2, name: '输入教师姓名' },
        {id: 3, name: '输入或确认班级码信息' },
        {id: 4, name: '关注“骆米智慧校园”公众号，使用系统' },
      ],

      imgUrl: ''
    }
  },
  methods: {
    openGuide () {
      this.$refs.guide.open()
    },
    toImage() {
        html2canvas(this.$refs.imageWrapper, {
          allowTaint: true,
          useCORS: true,
          backgroundColor: "transparent"
        }).then(canvas => {
          let dataURL = canvas.toDataURL("image/png");
          this.imgUrl = dataURL;
         
        })
    },
    creatQrCode() {
       new QRCode(this.$refs.qrCodeUrl, {
            text: this.picture.qrCodeValue, // 需要转换为二维码的内容
            width:  this.$refs.qrCodeUrl.offsetWidth ,
            height:  this.$refs.qrCodeUrl.offsetHeight ,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.Q
        })
    },
  },
  async mounted() {
    

    this.$vux.loading.hide();

    this.picture = JSON.parse(localStorage.pictureQRcode)
    this.numQRcode = localStorage.numQRcode
    this.QRcodeNum = localStorage.QRcodeNum
    this.shareClass = JSON.parse(localStorage.shareClass)
    
    if (this.QRcodeNum == 1) {
      this.List = this.textList1

      this.shareTitle = this.realName + '邀请您一起加入骆米，高效管理班级'
      this.shareDesc = '一个平台解决家校沟通、协同办公多个难题'
    } else {
      this.List = this.textList2

      this.shareTitle = '加入' + this.shareClass.gradeName + this.shareClass.name + '，实时了解孩子在校情况'
      this.shareDesc = '现在开通免费领取骆米智慧宝！'
    }

    await wechat.start()
    wechat.shareInvitation({
      link:this.picture.qrCodeValue,
      title: this.shareTitle,
      desc: this.shareDesc
    })
   
    this.$nextTick(async () => {
      this.creatQrCode()
       
      setTimeout(() => {
         this.toImage()
       }, 200)
      this.$vux.loading.hide();

      this.openGuide(0)
    })
    
  }
}
</script>

<style lang="less" scoped >
.confdssdf{
  background: #128FEF;
}
  .buttonCss {
    position: absolute;
    top: 8.5rem;
    left: 0.6rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 6rem;
    button {
      // width: 2.78rem;
      height: 0.8rem;
      background: #FF9900;
      color: #FFF;
      border-radius: 0.4rem;
      border: 0;
    }
  }

  .imgCss {
    position: absolute;
    top: 5.7rem;
    left: 0.6rem;
   
    width: 6rem;
    height: 2.5rem;
    text-align: center;
    .textClass {
      font-size: 0.4rem;
      margin-top: 0.5rem;
    }
    div {
    
     
  
    }
    img {
      width: 2.1rem;
      height: 2.1rem;
    }
  }

  .textCss {
    position: absolute;
    top: 1.5rem;
    left: 0.8rem;
    .textDivCss {
      display: flex;
      height: 0.85rem;
      font-size: 0.3rem;
      div {
        width: 0.38rem;
        height: 0.38rem;
        border-radius: 5rem;
        background: #FF9900;
        color: #FFF;
        font-size: 0.24rem;
        margin-right: 0.1rem;
      }
    }
  }

  .bigDivCss {
    width: 100%;
    // min-height: calc(100% - 0.88rem);
    background: #1aa8f3;
    position: relative;
    img {
      max-width: 100%;
    }
  }

  button {
    width: 5.6rem;
    height: 0.84rem;
    background: #128FEF;
    color: #FFF;
    border-radius: 0.42rem;
    font-size: 0.32rem;
    border: 0;
    margin: 0.7rem 0 0.4rem 0;
  }

.inputDiv {
  font-size: 0.28rem;
  margin-top: 0.4rem;
  input {
    width: 4.7rem;
    height: 0.85rem;
    border: 0;
    border-radius: 0.2rem;
    padding-left: 0.3rem;
    font-size: 0.28rem;
  }
  img {
    width: 0.5rem;
    margin-left: 0.3rem;
  }
}

.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flexHeight {
  display: inline-block; vertical-align: middle;
   color: #128FEF;
      font-size: 0.28rem;
}

.flexAlign {
  display: flex;
  align-items: center;
}

.flexEdge {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.canvas-img{
  max-width: 100%;
}
.pic-img{
  display: inline-block; vertical-align: middle;
      margin: 0 0.8rem 0 0;
      width: 2.5rem; height: 2.5rem;
}
.chang-an{
      padding: 0.2rem 0 0 0.55rem; text-align: left;
}
</style>
